<template>
  <view class="container">
    <view class="top-nav">
      <text>郑州720志愿者</text>
    </view>

    <view class="notice-nav" v-for="(_, index) in records" :key="index">
      <view class="notice-title">
        {{ regTtitle(index) }}
      </view>
      <view
        v-for="(item, indexs) in _"
        class="notice-info"
        @click="() => noticeDetail(item)"
        :key="indexs"
        style="border: none"
      >
        <view class="notice-img">
          <image
            :src="
              item.titlePic
                ? imgurl + item.titlePic
                : 'http://cdn.91xiaokong.com/chewei/720/gonggao.jpg'
            "
          >
          </image>
        </view>
        <view class="notice-content">
          <view>{{ item.title }}</view>
          <view>{{ item.contentDesc }}</view>
        </view>
      </view>
    </view>

	<tabbar :current-index='0'/>
  </view>

</template>

<script>
import { gongGaoList } from "@/api/tab1";

import tabbar from "@/components/tab-bar";
export default {
  components: {
    tabbar
  },

  data() {
    return {
      imgurl: "http://cdn.91xiaokong.com/chewei/",
      records: [],
      id: "",
    };
  },

  onLoad() {
    const recordsTemp = [];
    for (let i = 0; i < 3; i++) {
      /* 获取通知公告、简讯、720工作组动态数据 */
      gongGaoList({
        type: `${i}`,
        pageNo: 1,
        pageSize: 5,
      }).then(({ code, result: { records } }) => {
        if (code === 200) {
          recordsTemp.push(records);
        }
      });
    }
    this.records = recordsTemp;
  },

  methods: {
    noticeDetail(item) {
      const {id} = item;
      const url = `../news_detail/news_detail?id=${id}`;
      uni.navigateTo({ url });
    },

    go(url) {
      uni.navigateTo({ url });
    },

    regTtitle(i) {
      let bTitle = "";
      if (i === 0) bTitle = "通知公告";
      if (i === 1) bTitle = "简讯";
      if (i === 2) bTitle = "720工作组动态";
      return bTitle;
    },
  },
};
</script>

<style scoped>
.container {
  /* background-color: #ccc; */
  padding-bottom: 140rpx;
}

.top-nav {
  width: 100%;
  height: 200rpx;
  /* background-color: #ccc; */
  text-align: center;
  line-height: 200rpx;
}

.notice-nav {
  /* height: 300rpx; */
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
}

.notice-title {
  font-size: 30rpx;
  /* margin: 30rpx 0 0 30rpx; */
}

.notice-info {
  display: flex;
  justify-content: flex-start;
  margin-top: 30rpx;
  padding-bottom: 30rpx;
  border-bottom: #ccc 1rpx solid;
}

.notice-img {
  width: 120rpx;
  height: 120rpx;
  /* background-color: #baf; */
  margin-right: 30rpx;
}

.notice-img image {
  width: 120rpx;
  height: 120rpx;
}

.notice-content {
  width: 500rpx;
  overflow: hidden;
  font-size: 30rpx;
  text-overflow: ellipsis;
  /* height: 240rpx; */
  /* margin-right: 40rpx; */
  /* text-align: center; */
}

.notice-nav {
  /* height: 300rpx; */
  width: 88%;
  margin: 0 auto;
  border: 1rpx #706d6c;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.notice-title {
  font-size: 30rpx;
  /* margin: 30rpx 0 0 30rpx; */
}

.notice-info {
  display: flex;
  justify-content: flex-start;
  margin-top: 30rpx;
  padding-bottom: 30rpx;
  border-bottom: #ccc 1rpx dashed;
}

.notice-info1 {
  border-bottom: none;
}

.notice-content view:nth-of-type(2) {
  color: #cccccc;
}

</style>
